// 会议签到 

import React, { useState, useMemo, useCallback } from 'react';
import Header from '@/component/layout/Header/Header';
import { Result, Icon, WhiteSpace } from 'antd-mobile';
import './style.less';
import { postAttendMeetting, postAttendMeetting1,getMeetingDetail } from '@/network/protocol';
import { connect } from "react-redux";
import qs from "querystring";
import { InputItem, Button, Toast } from 'antd-mobile';
import Loading from "@/component/layout/loading/loading";
import { useEffect } from 'react';

const MettingSign = (props) => {
  const { userId, pwd, location } = props;

  const [res1, setRes] = useState(null);
  const [loading, setLoading] = useState(false);
  const [name, setName] = useState(userId) //xs_18918359839  ma_18918359839 
  const [password, setPassword] = useState(pwd)

  const [name1, setName1] = useState('');
  const [hospital, steHospital] = useState('');
  const [phone, sePhone] = useState('');

  const [detail, setDetail] = useState({})

  const meetingType = useMemo(() => {
    let search = location.search;
    if (!search) return;
    let str = search.slice(1);
    let param = qs.parse(str);
    return param.meetingType
  }, [location.search])

  const meetingId = useMemo(() => {
    let search = location.search;
    if (!search) return;
    let str = search.slice(1);
    let param = qs.parse(str);
    return param.meetingId
  }, [location.search])

  const setname = useCallback((key) => {
    setName(key.trim())
  }, [])

  const setpwd = useCallback((key) => {
    setPassword(key.trim())
  }, [])

  const setname1 = useCallback((key) => {
    setName1(key.trim())
  }, [])

  const stehospital = useCallback((key) => {
    steHospital(key.trim())
  }, [])

  const setphone1 = useCallback((key) => {
    sePhone(key.trim())
  }, [])

  const param1 = useMemo(() => {
    return {
      userName: name1,
      hospital: hospital,
      contract: phone,
      meetingId: meetingId
    }
  }, [hospital, meetingId, name1, phone])

  const postSign1 = useCallback(async () => {
    if (!param1.userName) { Toast.fail('请输入姓名', 1); return false }
    if (!param1.hospital) { Toast.fail('请输入医院', 1); return false }
    if (!param1.contract) { Toast.fail('请输入手机号', 1); return false }
    if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(phone))) {
      Toast.fail('请输入正确格式的手机号', 1); return false
    }
    setLoading(true)
    try {
      let response = await postAttendMeetting1(param1);
      if (response.errorCode === 0) {
        setRes(true)
      } else {
        setRes(false)
        Toast.fail(response.message || '签到失败！')
      }

    } catch (error) {
      setLoading(false)
      setRes(false)
      Toast.fail('签到失败！')
    }


    console.log(param1)
  }, [param1, phone])

  const getData = useCallback(async () => {
    try {
      let data = await getMeetingDetail({ meetingId });
      if (data.errorCode === 0) {
        let item = data.source;
        setDetail({ ...item })
      }
    } catch (error) {
      console.log(error)
    }

  }, [meetingId])

  const param = useMemo(() => {
    return {
      userId: name, userPass: password, meetingType, meetingId
    }
  }, [meetingId, meetingType, name, password])

  const postSign = useCallback(async () => {
    if (!param.userId) { Toast.fail('请输入账号', 1); return false }
    if (!param.userPass) { Toast.fail('请输入密码', 1); return false }
    setLoading(true)
    try {
      let response = await postAttendMeetting(param);
      setLoading(false)
      if (response.errorCode === 0) {
        setRes(true)
      } else {
        setRes(false)
        Toast.fail(response.message || '签到失败！')
      }
    } catch (error) {
      setLoading(false)
      setRes(false)
      Toast.fail('签到失败！')
    }

  }, [param])

  const renderO = useCallback(() => {
    if (!userId && res1 === null) {
      return <div className="options-boxb">
        <p className="metting-name">{detail.name || '会议名称'}</p>
        <div className="options-box">
          <span className="userid">姓名:</span>
          <InputItem
            clear
            placeholder="请输入姓名"
            onChange={setname1}
            value={name1}
          />
        </div>
        <div className="options-box">
          <span className="userid">医院:</span>
          <InputItem
            clear
            placeholder="请输入医院"
            onChange={stehospital}
            value={hospital}
          />
        </div>
        <div className="options-box">
          <span className="userid">手机:</span>
          <InputItem
            clear
            placeholder="请输入手机号"
            onChange={setphone1}
            value={phone}
          />
        </div>
        <Button
          size="small"
          loading={loading}
          type="primary"
          onClick={postSign1}
        >确定</Button>
      </div>
    }
  }, [hospital, loading, name1, phone, postSign1, res1, setname1, setphone1, stehospital, userId,detail])

  const renderRes = useCallback(() => {
    if (res1 === true) {
      return <Result
        img={<img src={require('../../assests/img/sign1.png')} className="spe am-icon am-icon-md" alt="" />}
        title={`${detail.name||''}` + '签到成功'}
      />
    } else if (res1 === false) {
      return < Result
        img={< img src={require('../../assests/img/sign2.png')} className="spe am-icon am-icon-md" alt="" />}
        title={`${detail.name||''}` + '签到失败'}
      />
    }
  }, [res1,detail])

  const renderLoding = useCallback(() => {
    if (userId && res1 === null)
      return <Loading style={{ height: '3rem' }} />
  }, [res1, userId])

  useEffect(() => {
    getData()
    if (userId) postSign()

  }, [postSign, userId])

  return (
    <>
      <Header center={<span>会议签到</span>} left={<span></span>} />
      <div className="global-content MettingSign-box">
        {renderLoding()}
        {renderO()}
        {renderRes()}
      </div>
    </>
  )
}

const mapStateToProps = state => {
  return {
    userId: state.user.userId,
    pwd: state.user.pwd
  }
}

// export default MettingSign 
export default connect(mapStateToProps, null)(MettingSign);